<template>
  <div class="widget_settings_pro">
    <ele-form-section
        labelPosition="left"
        v-model="formData"
        :request-fn="handleSubmit"
        :sections="sections"
    >
      <template v-slot:form-btn="{ btns }">
        <div class="rest-btn" @click="reset">
          <svg-icon icon-class="reset-settings"></svg-icon>
          重置配置
        </div>
      </template>
    </ele-form-section>
  </div>
</template>

<script>
import {deepClone} from '@/utils/utils';
// import SelectWithTips from '@/components/CheckoutMenu/select-with-tips';
export default {
    name: 'paymentFooter',
    props: {
        value: {
            type: Object,
            default: () => ({})
        }
    },
    watch: {
        formData: {
            handler (newVal, oldVal) {
                this.setData();
            },
            immediate: false,
            deep: true
        }
    },
    data () {
        return {
            pageCount: 0,
            formData: this.value ? JSON.parse(this.value.styleJson) : {},
            sections: [
                {
                    // 分区标题
                    title: '设置',
                    // 分区表单项
                    // 和group不同，仅将vue-ele-form的formDesc放入section中
                    formDesc: {
                        'checkout_payment_icon_show': {
                            type: 'switch',
                            break: true,
                            label: '支付图标'
                        },
                        // 字体颜色
                        'checkout_text_color': {
                            type: 'color',
                            label: '字体颜色',
                            break: true
                        }
                    }
                },
                {
                    title: '菜单填充',
                    formDesc: {
                        'checkout_menu_alignment': {
                            type: 'select',
                            label: '菜单位置',
                            options: [
                                {text: '垂直显示', value: 'column'},
                                {text: '水平显示', value: 'row'}
                            ]
                        }
                    }
                },
                {
                    title: '菜单1',
                    formDesc: {
                        'checkout_menu_policy_text_1': {
                            label: '菜单文案',
                            type: 'input-with-tips',
                            attrs: {
                                desc: '除默认文案跟随多语言自动切换展示，自定义编辑的文案不跟随多语言展示',
                                desc1: '当后台没有设置相应的服务说明时不进行跳转'
                            }
                        },
                        'checkout_menu_policy_link_1': {
                            label: '跳转链接',
                            type: 'select-with-tips',
                            attrs: {
                                desc: '当后台没有设置相应的服务说明时不进行跳转'
                            }
                        }
                    }
                },
                {
                    title: '菜单2',
                    formDesc: {
                        'checkout_menu_policy_text_2': {
                            label: '菜单文案',
                            type: 'input-with-tips',
                            attrs: {
                                desc: '除默认文案跟随多语言自动切换展示，自定义编辑的文案不跟随多语言展示'
                            }
                        },
                        'checkout_menu_policy_link_2': {
                            label: '跳转链接',
                            type: 'select-with-tips',
                            attrs: {
                                desc: '当后台没有设置相应的服务说明时不进行跳转'
                            }
                        }
                    }
                },
                {
                    title: '菜单3',
                    formDesc: {
                        'checkout_menu_policy_text_3': {
                            label: '菜单文案',
                            type: 'input-with-tips',
                            attrs: {
                                desc: '除默认文案跟随多语言自动切换展示，自定义编辑的文案不跟随多语言展示'
                            }
                        },
                        'checkout_menu_policy_link_3': {
                            label: '跳转链接',
                            type: 'select-with-tips',
                            attrs: {
                                desc: '当后台没有设置相应的服务说明时不进行跳转'
                            }
                        }
                    }
                }

            ]
        };
    },
    methods: {

        handleSubmit (data) {
            console.log(data);
            return Promise.resolve();
        },
        reset () {
            this.pageCount = 0;
            this.$emit('resetData', this.value);
        },
        setData () {
            let data = deepClone(this.value);
            data.styleJson = JSON.stringify(this.formData);
            this.$store.commit('SET_PROJECT_DATA', data);
        }
    },
    components: {
    },
    mounted () {
        if (!('checkout_text_color' in this.formData)) {
            this.$set(this.formData, 'checkout_text_color', 'rgb(34, 34, 34)');
        }
    }
};
</script>

<style scoped lang="scss">

</style>
